<template>
  <header>
    <div class="header-main">
      <div class="header-l">
        <h1 class="logo">
          <img src="@/assets/img/logo.jpg" alt="" />
        </h1>
        <ul>
          <li
            v-for="item in topBar"
            :key="item.id"
            :class="item.id == currentId ? 'active' : ''"
            @click="tabBar(item)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="header-r">
        <div class="search">
          <input type="text" />
          <el-icon color="#999" :size="20"><Search /></el-icon>
        </div>
        <div class="shop">
          <el-icon :size="20"><ShoppingCart /></el-icon>
        </div>
        <div class="login">
          <router-link to="/login"> 登录/注册 </router-link>
        </div>
      </div>
    </div>
  </header>
</template>
<script setup>
import { Search, ShoppingCart } from "@element-plus/icons-vue";
let topBar = ref([
  { id: 1, title: "首页", name: "Home" },
  { id: 2, title: "课程", name: "Course" },
  { id: 3, title: "会员", name: "Vip" },
]);
// 切换头部class类
let currentId = ref(1);
// 路由
let router = useRouter();
// 点击跳转
const tabBar = (item) => {
  currentId.value = item.id;
  router.push({
    name: item.name,
  });
};
watch(
  () => router.currentRoute._value.name,
  (toPath) => {
    if (toPath == "Home") {
      currentId.value = 1;
    } else if (toPath == "Course") {
      currentId.value = 2;
    } else if (toPath == "Vip") {
      currentId.value = 3;
    }
  },
  { immediate: true }
);
</script>
<style scoped>
header {
  position: relative;
  width: 100%;
  height: 80px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  z-index: 999;
}
.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
  height: 80px;
  margin: 0 auto;
}
.header-l {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 127px;
  height: 50px;
  margin-right: 51px;
}
.logo img {
  width: 100%;
  height: 100%;
}
.header-l ul {
  display: flex;
  height: 50px;
}
.header-l ul li {
  line-height: 50px;
  color: #808080;
  cursor: pointer;
}
.header-l ul li + li {
  margin-left: 79px;
  font-size: 16px;
}
.header-l ul li.active {
  position: relative;
  color: #3585ff;
  font-weight: 500;
}
.header-l ul li.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120%;
  margin-left: -10%;
  height: 2px;
  background-color: #3585ff;
}
.header-r {
  display: flex;
  align-items: center;
}
.header-r .search {
  display: flex;
  align-items: center;
  padding: 0 10px;
  width: 300px;
  height: 43px;
  background-color: #f0f2f4;
  border-radius: 5px;
}
.header-r .search input {
  width: 270px;
  height: 43px;
  border: none;
  background-color: transparent;
  outline: none;
}
.header-r .shop {
  display: flex;
  align-items: center;
  margin-left: 42px;
  cursor: pointer;
}
.header-r .login {
  margin-left: 35px;
  font-size: 16px;
  color: #808080;
  cursor: pointer;
}
</style>
